<template>
  <div
      class="forgetBack align-items_center pointer absolute flex"
      @click="handleForgotPassword(2)"
      v-if="forgotPassword"
  >
    <img src="@/assets/login/8.png"/>
    <div>返回</div>
  </div>
  <div class="loginForm absolute">
    <img class="loginForm_title block" src="@/assets/login/2.png" v-if="!forgotPassword"/>
    <img class="loginForm_title loginForm_forget block" src="@/assets/login/7.png" v-else/>
    <el-form :model="loginFrom" ref="ruleFormRef" :rules="rules">
      <el-form-item prop="username">
        <div class="align-items_center inputStyle flex mt-32">
          <img src="@/assets/login/3.png" v-if="!forgotPassword"/>
          <img src="@/assets/login/6.png" v-else/>
          <input placeholder="请输入登录账号" v-model="loginFrom.username"/>
        </div>
      </el-form-item>
      <el-form-item v-if="forgotPassword">
        <div class="inputStyle align-items_center flex">
          <img src="@/assets/login/3.png"/>
          <input placeholder="请输入绑定手机"/>
        </div>
      </el-form-item>
      <el-form-item v-else prop="password">
        <div class="inputStyle align-items_center flex">
          <img src="@/assets/login/4.png"/>
          <input placeholder="请输入登录密码" v-model="loginFrom.password"/>
        </div>
      </el-form-item>
      <!-- <el-form-item>
        <div class="inputStyle align-items_center flex">
          <img src="@/assets/login/5.png" />
          <input placeholder="请输入验证码" />
        </div>
      </el-form-item> -->
      <template v-if="forgotPassword">
        <el-form-item>
          <div class="inputStyle align-items_center flex">
            <img src="@/assets/login/4.png"/>
            <input placeholder="请输入新密码"/>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="inputStyle align-items_center flex">
            <img src="@/assets/login/4.png"/>
            <input placeholder="请重新输入新密码"/>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <div class="align-items_center loginForm_operation space-between flex" v-if="!forgotPassword">
      <el-checkbox v-model="loginFrom.rememberMe" label="记住密码" size="large"/>
      <div class="pointer forget" @click="handleForgotPassword(1)">忘记密码</div>
    </div>
    <div class="pointer bt_360_56 mt-32" @click="formSubmit(ruleFormRef)">
      {{ !forgotPassword ? '登录' : '确定' }}
    </div>
  </div>
</template>
<script setup>
import {ref, reactive} from "vue";
import {useRouter} from "vue-router";

// main
const {push} = useRouter()


const loginFrom = reactive({
  username: "",
  password: "",
  rememberMe: false,
})
const rules = reactive({
  username: [{required: true, message: '请输入用户账号', trigger: 'blur'}],
  password: [{required: true, message: '请输入用户密码', trigger: 'blur'}],
})

// 忘记密码
const forgotPassword = ref(false)
/**
 * 忘记密码
 * @param type
 */
const handleForgotPassword = (type) => {
  if (type === 1) forgotPassword.value = true;
  else forgotPassword.value = false;
}

/**
 * 登录
 * @param formName
 */
const formSubmit = (formName) => {
  push("/")
}


</script>

<style lang="scss" scoped>
.forgetBack {
  top: 30px;
  left: 30px;
  font-size: 18px;
  font-weight: normal;
  color: #333;
  
  img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}

.loginForm {
  top: 50%;
  left: 50%;
  width: 360px;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
  
  &_operation {
    .forget {
      font-size: 14px;
      font-weight: normal;
      color: #212121;
    }
    
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #e32519;
      border-color: #e32519;
    }
    
    :deep(.el-checkbox .el-checkbox__label) {
      font-size: 14px;
      color: #212121;
    }
  }
  
  .inputStyle {
    width: 360px;
    height: 56px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 4px;
    
    input {
      margin-left: 44px;
      font-size: 14px;
      font-weight: normal;
      border: none;
      outline: none;
    }
    
    img {
      width: 24px;
      height: 24px;
      margin-left: 22px;
    }
  }
  
  &_title {
    width: 274px;
    height: 25px;
    margin: 0 auto;
  }
  
  &_forget {
    width: 203px;
  }
}
</style>
